<template>
  <div class="content">
    <div class="mainBack padding-all">
      <div class="flex-justify-align">
        <div>
          <h3>{{ getInvoiceStatus(invoiceInfo.vstatus, invoiceInfo.invoicetype) }}</h3>
          <p class="txt-info txt-tips">{{ invoiceInfo.applydate }}</p>
        </div>
        <div style="display: flex;">
          <div class="button1" v-if="invoiceInfo.vstatus=='1'">
            <button class="mint-button mint-button--danger mint-button--normal">
              <label class="mint-button-text" @click="dj(invoiceInfo.txId)">发票冲红</label>
            </button>
          </div>
          <div class="button2" v-if="invoiceInfo.vstatus=='1'">
            <button class="mint-button mint-button--danger mint-button--normal" style="background: #4E6EF2">
              <label class="mint-button-text" @click="resend(invoiceInfo.txId)">重新发送</label>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="mainBack margin-t padding-b">
      <div class="info-list">
        <ul>
          <li>
            <p>发票类型</p>
            <p class="col-1 txt-align-r">{{ invoiceInfo.custType | formStatus }}</p>
          </li>
          <li>
            <p>发票抬头</p>
            <p class="col-1 txt-align-r">{{ invoiceInfo.customer }}</p>
          </li>
          <li>
            <p>纳税人识别号</p>
            <p class="col-1 txt-align-r">{{ invoiceInfo.socialCode }}</p>
          </li>
          <li>
            <p>本次开票金额</p>
            <p class="col-1 txt-align-r txt-red">￥{{ formatAmount(invoiceInfo.openAmt) }}</p>
          </li>
        </ul>
      </div>
      <div class="invoice-cont">
        <div class="invoice-list padding-t" v-for="(item, index) of invoiceInfo.orderGoods" :key="index">
          <div class="invoice-item">
            <div class="invoice-item-top flex-justify border-b padding-b product">
              <div class="col-1">
                <p class="txt-weight">{{ item.goodsNm }}</p>
              </div>
              <div class="col-30 txt-align-r">
                <h3 class="txt-weight txt-red">
                  <span class="txt-tips">￥</span>{{ formatAmount(item.openAmt) }}
                </h3>
              </div>
            </div>
            <div class="invoice-item-bot padding-t flex-justify-align product">
              <div>开票数量</div>
              <div>{{ item.goodsNum }}</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <h4 class="padding-all">发票接收方式</h4>
        <div class="mainBack info-list">
          <ul>
            <li>
              <p>电子发票接收邮箱</p>
              <p class="col-1 txt-align-r">{{ invoiceInfo.mail }}</p>
            </li>
            <li>
              <p>短信接收号码</p>
              <p class="col-1 txt-align-r">{{ invoiceInfo.telephone }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HistoryView",
  data() {
    return {
      invoiceInfo: {
        orderGoods: []
      }
    };
  },
  filters: {
    formStatus(value) {
      if (value === "1") {
        return '企业'
      } else if (value === "0") {
        return '个人'
      }
      return '未知'
    }
  },
  methods: {
    formatAmount(amount) {
      return amount ? Number(amount).toFixed(2) : '0.00'
    },
    getInvoiceStatus(vstatus, invoicetype) {
      const type = invoicetype === "1" ? "数电专票" : "数电普票"
      let status = ""
      switch(vstatus) {
        case "0": status = "开具中"; break;
        case "1": status = "已开具"; break;
        case "2": status = "开具失败"; break;
        case "3": status = "红冲中"; break;
        case "4": status = "已红冲"; break;
        case "5": status = "红冲作废（超72小时未确认）"; break;
        default: status = "未知状态";
      }
      return `${type}-${status}`
    },
    dj(txId) {
      const params = {
        chName: this.invoiceInfo.chName,
        socialCode: this.invoiceInfo.socialCode,
        custName: this.invoiceInfo.customer,
        address: this.invoiceInfo.address,
        telephone: this.invoiceInfo.telephone,
        bank: this.invoiceInfo.bank,
        accountnum: this.invoiceInfo.accountNum,
        mail: this.invoiceInfo.mail,
        blueSerialNo: this.invoiceInfo.globalSerialNo,
        blueBillNum: this.invoiceInfo.billNum,
        openType: "2", // 固定为2
        redReason: "1", // 固定为1
        bluebillnum: this.invoiceInfo.blueBillNum // 原蓝字发票号码
      };

      console.log('冲红参数:', params); // 添加日志

      this.$router.push({ 
        path: "/PunchingRedView", 
        query: { 
          txId: txId,
          billNum: this.invoiceInfo.billNum,
          params: JSON.stringify(params)
        }
      });
    },
    resend(txId) {
      this.$router.push({ 
        path: "/ResendView", 
        query: { 
          txId: txId,
          billNum: this.invoiceInfo.billNum || '',
          receiverMail: this.invoiceInfo.mail || ''
        }
      });
    },
    getList() {
      const txId = this.$route.query.VocNo;
      const txNo = this.$route.query.txNo;
      
      this.$apiClient({
        method: "get",
        url: "/invoice/queryMetalElecReceiptRecord",
        params: {
          txNo: txNo
        }
      }).then(res => {
        if (res.data.data.returnCode === "90000") {
          const bill = res.data.data.bills.find(item => item.txId === txId);
          if (bill) {
            this.invoiceInfo = bill;
          }
        }
      }).catch(error => {
        console.error('获取发票详情失败:', error);
      });
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped>
  a, abbr, audio, b, body, button, canvas, dd, div, dl, dt, em, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, input, label, li, mark, menu, nav, ol, option, p, ruby, s, section, select, span, table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, video {
    margin: 0;
  }
  .content {
    overflow: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    font-size: 4.2vw;
    color: #333;

  }
  .mainBack {
    background: #fff;
  }
  .margin-t {
    margin-top: .2rem;
  }
  .padding-t {
    padding-top: .2rem;
  }
  .mainBack ol,ul{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .info-list ul li {
    padding: 4vw 0;
    margin: 0 2vw;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
    display: -webkit-box;
    overflow: hidden;
  }
  .info-list ul li label {
    display: block;
    min-width: 2rem;
  }
  .txt-align-r {
    text-align: right;
  }
  .col-1 {
    -webkit-box-flex: 1;
    margin-right: 5vw;
  }
  .mtmine-radio {
    overflow: hidden;
  }
  .flex-justify-align {
    display: flex;
    justify-content: space-between;
  }

  .flex-end {
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: end;
  }
  .txt-red {
    color: #c9161e;
  }
  .txt-weight {
    font-weight: 900;

  }
  .invoice-total{
    padding: 0 .2rem .2rem;
  }
  .txt-h3, h3, h4 {
    font-size: 5vw;
  }
  h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
  }
  .txt-info {
    color: #999;
  }
  .txt-tips, h6 {
    font-size: 3vw;
  }
  .invoice-type .mtmine-radio .mint-cell {
    margin-right: 0;
    min-height: 10.5rem;
    padding-left: 1.3rem;
  }
  .mint-cell-left {
    position: absolute;
    height: 100%;
    left: 0;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
  }
  .mtmine-radio .mint-radio-core {
    width: .4rem;
    height: .4rem;
  }
  .mtmine-radio .mint-radio-input:checked+.mint-radio-core {
    background-color: #c9161e;
    border-color: #c9161e;
  }

  .mtmine-radio .mint-radio-label {
    margin-left: 0;
    font-size: 1.58rem;
  }
  .info-list ul li input[type=text] {
    display: block;
    -webkit-box-flex: 1;
    font-size: 1.58rem;
  }
  .info-list ul li input {
    border: none;
  }

  .invoice-total {
    padding: 0 .2rem .2rem;
  }
  .padding-all {
    padding: 1vw;
    margin-top: 2vw;
    margin-bottom: 2vw;
    text-align :left;
  }
  .kaipiao{
    width :2.0rem;
    height :2.0rem;
  }
  .back-grey {
    background: #f8f8f8;
  }
  .mint-button--danger {
    color: #fff;
    background-color: #c9161e;
  }
  .mint-button--normal, .mint-button--small {
    display: inline-block;
    padding: 0 12px;
  }
  .mint-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 5vw;
    border: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 4.2vw;
    height: 8vw;
    outline: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
  }
  .invoice-item {
    margin: 2vw 2vw 2vw 2vw;
    border: 1px solid #e8e8e8;
    padding: 2vw;
    border-radius: 3vw;
  }
  .invoice-item:last-child {
    margin-bottom: 0;
  }
  .padding-b {
    padding-bottom: 2vw;
  }

  .border-b {
    border-bottom: 1px solid #e8e8e8;
  }
  .txt-align-r {
    text-align: right;
  }
  .col-30 {
    width: 30%;
  }
  .product {
    width: 96%;
    margin-left: 2%;
    justify-content: space-between;
    display: flex;
  }
  .invoice-item-bot {
    margin: 2vw 2vw 2vw;
  }

  .invoice-cont {
    margin-right: 3%;
  }
  .button1,.button2{
    margin-right: 2vw;
  }
</style>
